<script>
import { Expand, Fold, RefreshRight, Setting } from '@element-plus/icons-vue';

export default {
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    },
    username: {
      type: String,
      default: 'admin'
    }
  },
  data() {
    return {
      Expand,
      Fold,
      RefreshRight,
      Setting,
      breadcrumbs: []
    }
  },
  created() {
    // 初始化面包屑数据
    this.updateBreadcrumb();
  },
  watch: {
    '$route': 'updateBreadcrumb'
  },
  methods: {
    updateBreadcrumb() {
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title);
      const breadcrumbs = [];
      
      // 只添加匹配到的路由项，避免重复
      matched.forEach(item => {
        breadcrumbs.push({
          path: item.path,
          title: item.meta.title
        });
      });
      
      this.breadcrumbs = breadcrumbs;
    },
    refreshPage() {
      window.location.reload();
    },
    toggleCollapse() {
      this.$emit('toggle-collapse');
    },
    handleLogout() {
      this.$emit('logout');
    },
    handleBreadcrumbClick(path) {
      if (path !== this.$route.path) {
        this.$router.push(path);
      }
    }
  }
}
</script>

<template>
  <el-header>
    <!-- 左侧功能区 -->
    <div style="display: flex; align-items: center;">
      <el-icon 
        @click="toggleCollapse"
        style="cursor: pointer; vertical-align: middle;"
        size="18"
      >
        <component :is="isCollapse ? Expand : Fold" />
      </el-icon>
      <el-icon 
        @click="refreshPage"
        style="cursor: pointer; vertical-align: middle; margin-left: 25px; margin-right: 25px;"
        size="18"
      >
        <RefreshRight />
      </el-icon>
      
      <!-- 新增面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item 
          v-for="(item, index) in breadcrumbs" 
          :key="index"
          :to="{ path: item.path }"
          @click.prevent="handleBreadcrumbClick(item.path)"
        >
          {{ item.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 用户区域 -->
    <div style="display: flex; align-items: center;"> 
      <el-avatar 
        shape="square"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        style="margin-right: 15px;" 
      /> 
      <span style="font-size: 14px; margin-right: 25px;">{{username}}</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-icon class="el-icon--right" size="18" color="#000"> <Setting /> </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<style scoped>
.el-header {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  color: #333;
  text-align: center;
  padding: 0 2%;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  outline: none;
}

.el-breadcrumb {
  font-size: 14px;
  line-height: 1;
}
</style>
